<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>定位</title>
</head>

<body>
    <h2>相对定位</h2>
    <!-- 相对定位的特点 
    1.相对于自己原来的位置
    2.相对定位的元素不会脱离文档流
    3.属性和对应的方向是相反的
    -->
    <div class="box b1">a1</div>
    <div class="box b2">b2</div>
    <div class="box b3">b3</div>
    <h2>绝对定位</h2>
    <!-- 绝对定位的特点
    1.会脱离文档流
    2.会向上去找直系亲属,直到找到第一个有定位的元素,然后以这个元素为参照作为一个定位
    3.偏移方向left以参照元素盒子的左边为基准,right以参照元素盒子的右边为基准.bottom,top亦是如此.
-->
    <div class="parent a">
        parent
        <div class="child2 a">
            child2
        </div>

        <div class="child a">
            child
            <p>grandson上面的</p>
            <div class="grandson a">
                grandson
            </div>
            <p>grandson下面的</p>

            <div class="grandson2 a">
                grandson2
            </div>
        </div>
    </div>
    <h2>固定定位</h2>
    <!-- 固定定位的特点
    1.会脱离文档流
    2.以窗口视窗作为定位基准.便宜方向和绝对定位一样.
    -->
    <div class="contact" >
        固定定位
    </div>
</body>

</html>